<template>
    <div class="newsdetail-container">
        <h3 class="title">{{ news.title }}</h3>
        <!-- <h1>新闻详情--{{ id }}</h1> -->
        <div class="date">
            <span>发布时间:{{ news.add_time | dateFormat("YYYY-MM-DD") }}</span>
            <span>浏览次数:{{ news.click }}次</span>
        </div>
        <van-divider />
        <div class="content" v-html="news.content"></div>
        <van-field
            v-model="message"
            rows="5"
            autosizes
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
        />
        <van-button type="info" class="post" block @click="postComment"
            >发布评论</van-button
        >

        <div class="commentlist">
            <div class="item" v-for="item in comments" :key="item.id">
                <div>{{ item.user_name }}:{{item.content}}</div>
                <div>
                    评论时间：{{ item.add_time | dateFormat("YYYY-MM-DD") }}
                </div>
            </div>
        </div>
        <van-button
            :loading="loading"
            loading-text="加载中..."
            type="danger"
            plain
            block
            @click="loadMore"
            >查看更多</van-button
        >
        <BackTop />
    </div>
</template>

<script>
import {
    fetchNewsDetail,
    fetchNewsComment,
    fetchPostComment,
} from "@/api/index.js";
import BackTop from "@/components/BackTop.vue";
export default {
    props: ["id"],
    data() {
        return {
            page: 1,
            content: "",
            message: "",
            news: {},
            comments: [],
            loading: false,
            isDone: false,
        };
    },
    created() {
        this._fetchNewsDetail();
        this._fetchNewsComment();
    },
    methods: {
        async _fetchNewsDetail() {
            let { message } = await fetchNewsDetail(this.id);
            this.news = message;
        },
        async _fetchNewsComment() {
            this.loading = true;
            let { message } = await fetchNewsComment(this.id, this.page);
            this.loading = false;
            if (message.length === 0) {
                this.isDone = true;
                return;
            }
            this.comments = [...this.comments, ...message];
        },
        loadMore() {
            if (this.isDone) {
                this.$toast("数据已经加载完毕");
                return;
            }
            this.page++;
            this._fetchNewsComment();
        },
        async postComment() {
            let { message, insertId, status} = await fetchPostComment(
                this.id,
                this.message
            );
            if (status === 0) {
                this.$toast(message);
                let item = {
                    add_time: Date.now(),
                    content:this.message,
                    id:insertId,
                    user_name: "匿名用户",
                };
                // console.log(1111);
                this.comments.unshift(item);
                // 清空内容
                this.message = "";
            }
        },
    },
    components: {
        BackTop,
    },
};
</script>

<style lang="scss" scoped>
.newDetail-container {
    padding: 6px;
    .date {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #888;
    }
    .content {
        ::v-deep img {
            width: 100%;
        }
    }

    .post {
        margin: 10px 0;
    }

    .commentlist {
        font-size: 12px;
        .item {
            background-color: #f2f2f2;
            margin: 4px 0;
        }
    }
}
</style>
